<template>
  	<div class="table-wrap">
	    <c-table class="table" height="640px" :table-column="normalTableColumn" :table-data="list" :operation="false" @moreInfo="moreInfoHandle1"></c-table>
	    <c-table class="table" height="640px" @on-save="onSave" @current="currentChange" :table-column="systemTableColumn" :table-data="lists" :currentDft="0" :isDelete="false" :operation="false" @moreInfo="moreInfoHandle2" @details="warehousePeopleHandle"></c-table>
	    <DetailDialog v-if="showDetailDialog" :detailData="detailData" @detailsChange="detailsChange" :pageOptions="pageOptions" @close="closeHandle"></DetailDialog>
		<MoreDialog v-if="showMoreDialog" :moreDialogData="moreDialogData" :moreDialogType="moreDialogType" @close="closeMoreDialog"></MoreDialog>
		<equipment-dialog v-if="showEquipmentDialog" :modelId="modelId" :equipmentDialogData="equipmentDialogData" @close="closeEquipmentDialog" />
  	</div>
</template>

<script>
import warehouseApi from '@/apis/overview/warehouse.js'
import DetailDialog from './DetailDialog.vue'
import MoreDialog from './MoreDialog.vue'
import EquipmentDialog from './EquipmentDialog.vue'
export default {
	components: {DetailDialog, MoreDialog, EquipmentDialog},
  	props: {
	    billType: { // NORMAL: 设备库, SYSTEM: 系统库
	      	type: String,
	      	default: 'NORMAL'
	    },
	    list: {
	      	type: Array,
	      	default() {
	        	return []
	      	}
	    },
		lists: {
	      	type: Array,
	      	default() {
	        	return []
	      	}
	    },
		modelId: {
			type: Number,
			default: ''
		}
  	},
  	data() {
    	return {
      		normalTableColumn: {
		        deviceCode: {
		          	label: '设备代号',
		          	columnProp: {
		            	align: 'center'
		          	}
		        },
		        deviceName: {
		          	label: '设备名称',
		          	columnProp: {
		            	align: 'center'
		          	}
		        },
		        deviceNo: {
		          	label: '设备编号',
		          	columnProp: {
		            	align: 'center'
		          	},
		        },
		        instockTime: {
		          	label: '入库时间',
		          	columnProp: {
		            	align: 'center',
		          	},
		        },
		        instockOperator: {
		          	label: '入库人',
		          	columnProp: {
		            	align: 'center',
		          	},
		        },
				moreInfo: {
					type: 'link',
		          	label: '详情',
					text: '详情',
		          	columnProp: {
		            	align: 'center'
		          	},
		        },
      		},
      		systemTableColumn: {
		        sysCode: {
		          	label: '系统代号',
		          	columnProp: {
		            	align: 'center'
		          	}
		        },
		        sysName: {
		          	label: '系统名称',
		          	columnProp: {
		            	align: 'center'
		          	}
		        },
		        sysNo: {
					type:'input',
		          	label: '系统编号',
		          	columnProp: {
		            	align: 'center'
		          	},
		        },
		        details: {
					type: 'link',
		          	label: '系统单机列表',
					text: '查看',
		          	columnProp: {
		            	align: 'center'
		          	},
					width: '120px'
		        },
		        status: {
		          	label: '当前状态',
		          	columnProp: {
		            	align: 'center'
		          	},
		        },
				moreInfo: {
					type: 'link',
		          	label: '详情',
					text: '详情',
		          	columnProp: {
		            	align: 'center'
		          	},
		        },
      		},
      		showDetailDialog: false,
      		detailData: [],
			pageOptions: {
		        page: 1,
		        pageSize: 10,
		        total: 1,
		        sizes: [5, 10, 20, 30, 40, 50, 100]
	      	},
			detailsReq:{
				id:''
			},
			showMoreDialog: false,
			moreDialogData: null,
			moreDialogType: 1,
			showEquipmentDialog: false,
			equipmentDialogData: null
    	}
  	},
  	watch: {
    	billType(val) {
    		
    	}
  	},
  	methods: {
		onSave(row) {
			row.edit = false
			this.$emit('saveRow',row)
		},
		currentChange(e) {
			this.$emit('currentChange',e)
		},
	    storageTimeFormatter(row) {
	     	return row.storageTime
	    },
	    deliveryTimeFormatter(row) {
	     	return row.deliveryTime
	    },
		detailsChange(page) {
			this.pageOptions.page = page
			this.warehousePeopleHandle(this.detailsReq)
		},
	    // 查看详情
	    warehousePeopleHandle(row) {
	    	this.showDetailDialog = true
			this.detailsReq.id = row.id
			const {page, pageSize} = this.pageOptions
			warehouseApi.getDetails({
				stockId: row.id,
				pageNum: page,
				pageSize
			}).then(({ data }) => {
				const {list, total} = data
				// this.stytemData = list;
				this.pageOptions.total = total
				this.detailData = list
			})
	    },
	    closeHandle() {
	    	this.showDetailDialog = false
	    },
		moreInfoHandle1(row) {
			this.showEquipmentDialog = true,
			this.equipmentDialogData = row
			// this.showMoreDialog = true;
			// this.moreDialogData = row;
			// this.moreDialogType = 1
		},
		moreInfoHandle2(row) {
			this.showMoreDialog = true;
			this.moreDialogData = row;
			this.moreDialogType = 2
		},
		closeMoreDialog() {
			this.showMoreDialog = false
		},
		closeEquipmentDialog() {
			this.showEquipmentDialog = false
		}
  	}
}
</script>

<style lang="scss" scoped>
.table-wrap{
	display: flex;
	justify-content: space-between;
	.table{
		width:48%;
		background-color: #FFF;
	}

	/deep/ {
		.el-table.modify-class th,.el-table.modify-class td{
			font-size:15px
		}
		.el-table__body-wrapper {
			height: 580px;
		}
	}
}
</style>